{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import create %}
{% form_theme form _self %}
{% block number_widget -%}
    {# type="number" doesn't work with floats #}
    {%- set type = type|default('text') %}
    <div class="col-sm-2">
        <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
    </div>
{%- endblock number_widget %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    '@datepicker_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div class="page-content">

            {{ form_start(form, {'attr':{'id':'notice_form'}}) }}
            {{ form_row(form.title) }}
            <div class="form-group">
                {{ form_label(form.startDate) }}
                {{ form_widget(form.startDate) }} {{ form_widget(form.endDate) }}
            </div>
            <div class="form-group">
                <label for="notice_info_form_startDate" class="col-sm-3 control-label no-padding-right required">{{ 'Content'|trans }}</label>
                <div class="col-sm-6">
                    <div id="my-editor" class="wysiwyg-editor"></div>
                </div>
            </div>
            {{ form_row(form.content) }}
            {{ create(path('icsoc_notice_index')) }}
            {{ form_end(form) }}
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqvalidate_js'
    '@datepicker_js'
    '@gritter_js'
    '@common_js'
    '@wysiwyg_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        $(document).ready(function (){
            $('#notice_info_form_startDate').datetimepicker({locale:'zh-cn',format:'YYYY-MM-DD', widgetPositioning:{horizontal:'left'}});
            $('#notice_info_form_endDate').datetimepicker({locale:'zh-cn',format:'YYYY-MM-DD', widgetPositioning:{horizontal:'left'}});
            $('#my-editor').ace_wysiwyg().prev().addClass('wysiwyg-style1');
            $('#my-editor').html($('#notice_info_form_content').val());
            $('#notice_form').on('submit', function(){
                var content = $('#my-editor').html();
                if ($.trim(content.replace(/&nbsp;/g,'')).length < 1) {
                    gritterAlert("{{ 'Prompt'|trans }}", "{{ 'Please fill in the content'|trans }}","error");
                    $($('#my-editor').parent().parent()).attr('class','form-group has-error');
                    return false
                }
                //比较日期
                var startDate = $('#notice_info_form_startDate').val();
                var endDate = $('#notice_info_form_endDate').val();
                var d1 = new Date(startDate.replace(/\-/g, "\/"));
                var d2 = new Date(endDate.replace(/\-/g, "\/"));
                if (d2 < d1) {
                    gritterAlert("{{ 'Prompt'|trans }}", "{{ 'Start date cannot be greater than end date'|trans }}","error");
                    return false;
                }
                $('#notice_info_form_content').val(content);
            });
            $('#notice_form').validate({
                errorElement: 'div',
                errorClass: 'help-block',
                focusInvalid: false,
                errorPlacement: function(error, element){
                    if (element[0].id == 'notice_info_form_title') {
                        error.appendTo(element.parent());
                    } else {
                        error.appendTo(element.parent().parent());
                    }
                    $(element.parent().parent()).attr('class','form-group has-error');
                },
                showErrors: function(errorMap, errorList) {
                    this.defaultShowErrors();
                    for (var i=0; i<errorList.length;i++) {
                        $(errorList[i].element).removeClass('help-block');
                        $(errorList[i].element).parent().parent().attr('class', 'form-group has-error');
                    }
                },
                success: function(lable) {
                    var id = $(lable).attr("for");
                    if (id == 'notice_info_form_title') {
                        $(lable.parent().parent()).attr('class', 'form-group');
                    } else {
                         $(lable.parent()).attr('class', 'form-group');
                    }
                },
                rules: {
                    'notice_info_form[title]': "required"
                },
                messages: {
                    'notice_info_form[title]': '{{ 'Title must not be empty'|trans }}',
                    'notice_info_form[startDate]': {'required':''},
                    'notice_info_form[endDate]': {'required':''}
                }
            })
        })

    </script>
{% endblock %}